<script setup>
import MyApply from "@/views/v-wkf-service/flow/wkf-space/my-apply/index.vue"//缺少查看详情
import MyToDo from "@/views/v-wkf-service/flow/wkf-space/my-todo/index.vue"//缺少批量通过、批量驳回、办理、转发
import MyDone from "@/views/v-wkf-service/flow/wkf-space/my-done/index.vue"//缺少查看详情

const activeName = ref("MyApply")
/**
 * 创建浅响应式对象、不会对组件对象深度观察、避免不必要的性能开销、移除控制台警告
 */
const activeComponent = shallowRef(MyApply)

const tabs = ref([
  { label: "我发起的申请", name: "MyApply", component: shallowRef(MyApply) },
  { label: "我的待办", name: "MyToDo", component: shallowRef(MyToDo) },
  { label: "我的已办", name: "MyDone", component: shallowRef(MyDone) },
])

const tabMap = {
  "MyApply" : () => {},
  "MyToDo" : () => {},
  "MyDone" : () => {},
}

const tabChange = (val) => {
  activeName.value = val.paneName
  tabs.value.forEach(ele => {
    if (ele.name === val.paneName) activeComponent.value = ele.component
  })
}

</script>

<template>
  <div class="wkf-space-box">
    <el-tabs v-model="activeName" @tab-click="tabChange">
      <el-tab-pane v-for="item in tabs" :label="item.label" :name="item.name" />
      <component :is="activeComponent" />
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
.wkf-space-box {
  height: 100%;
  width: 100%;
  :deep(.el-tabs) {
    .el-tabs__header {
      margin: 10px 0 0;
      padding: 0 20px;
      .el-tabs__nav-wrap::after {
        content: unset;
      }
      .el-tabs__active-bar {
        height: 0;
      }
    }
    .el-tabs__content {
      overflow: unset;
    }
  }
}
</style>
